<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../js/vue.js"></script>
</head>
<!--
收集表单数据：
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
		-->




<body>
<!--  准备好一个容器-->
<div id="root">
<!--    点击提交默认会跳转-->
    <form @submit.prevent="demo">
<!--        触及焦点就会触碰-->
        <label for="demo1">账号</label>
<!--        trim去两边空格-->
        <input type="text" id="demo1" v-model.trim="userINFO.account">

        <br> <br>

        <label for="demo2">密码</label>
        <input type="password" id="demo2" v-model="userINFO.password">

        <br> <br>

        <label for="demo3">年龄</label>
        <input type="number" id="demo3" v-model.number="userINFO.age">

        <br> <br>
<!--      vue 中v-model只看用户输入的value值，-->
        性别：
        男 <input type="radio" name="sex" v-model="userINFO.sex" value="male">
        女 <input type="radio" name="sex"  v-model="userINFO.sex" value="female">

        <br> <br>
        爱好：
        抽烟 <input type="checkbox" v-model="userINFO.hobby" value="chouyan">
        喝酒 <input type="checkbox" v-model="userINFO.hobby" value="hejiu">
        烫头 <input type="checkbox" v-model="userINFO.hobby" value="tangtou">

        <br> <br>
        所属校区：
<!--        下拉选项框-->
        <select v-model="userINFO.city">
            <option value="">请选择校区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
        </select>

        <br> <br>
        其他信息：
<!--       多行输入可以固定宽高  lazy失去焦点的时候收集 -->
        <textarea  v-model.lazy="userINFO.other"></textarea>

        <br> <br>
       <input type="checkbox" v-model="userINFO.agree"> 阅读并接受 <a href="###">《用户协议》</a>

        <br> <br>
        <button>提交</button>
    </form>

</div>
</body>

<script >
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            userINFO:{
                account:'',
                password:'',
                // 默认值为female
                sex:'female',

                //如果是多组的多选框用数组
                hobby:[],

                city:'beijing',
                other:'',
                agree:'',
                age:'',
            }
        },
        methods:{
            demo(){
                // JSON.stringify 转化成json对象
                console.log(JSON.stringify(this.userINFO))
            }
        }
    })
</script>
</html>